<template>
    <div class="m-con student">
        <div class="u-title">比赛规则</div>
        <div class="ruleImg" v-if="actInfo.stagesImages">
            <img v-lazy="actInfo.stagesImages">
        </div>
        <div class="u-title mt50">比赛内容</div>
        <div class="rank_box" v-for="(item,index) in gameList" :key="index">
            <div class="card_box">
                <img v-lazy="item.columnImages" alt="">
                <div class="card-title">{{item.columnTitle}}</div>
            </div>
        </div>
        <div class="m-bompart">
            <div class="signup-btn" @click="clickSignUp">
                <img src="@/assets/img/signup/SignUpBtn.png"/>
            </div>
        </div>
        
        <!-- 弹窗 -->
        <div class="mask" v-if="mask"></div>
        <transition name='tips'>
            <div class="layermain" v-if="EnableShow">   
                <div class="layer-sign">
                    <div class="con">
                        <img src="@/assets/img/signup/signUpDialog.png" alt="">
                        <div class="ensure-btn" @click="clickClose"></div> 
                    </div>
                </div>  
            </div>
        </transition>
    </div>
</template>
<script>
import * as api from '@/api/index';
export default {
	name: 'singup',
    data () {
        return {
            userInfo: JSON.parse(localStorage.getItem("userInfo")),
            userId: this.$store.state.userId,
            gameList:[],
            EnableShow: false,
            mask: false,
            isSignUp:false
        }
    },
    props:{
        actInfo: Object
    },
    computed: {
        
    },
    watch:{
        mask(val){
            this.$store.dispatch("setMaskAct",val);
        },
    },
    created(){
        this.getGameList()
    },
    methods: {
        /*****
		 * 获取比赛项目的信息，包括背景图、项目名、每个项目参与人数
		 * ****/ 
        async getGameList(){
            var data={
                futureId: this.$parent.userInfo.futureId,
            }
            var res=await api.getColumnInfo(data)
            if(res.resultCode==1){
                this.gameList=res.value
            }
        },
        /*****
		 * 用期号用户编号查看是报名
		 * resultCode: 0未报名 1已经报名
		 * ****/ 
        async clickSignUp(flag,item){
            var data = {
                futureId: this.$parent.userInfo.futureId,
                userId: this.userId,							
			}
            var res = await api.CheckUserId(data)
            if(res.resultCode == 1){
                this.isSignUp =true
                this.$LayerTips({
                    content: "你已报名，记得来参赛哦",
                    time: 1500
                });
                return false
            }else{
                this.AddEnroll()
            }
        },
        async AddEnroll(){
            var data = {
                classId: this.$parent.userInfo.classList[0].classId,
                futureId: this.$parent.userInfo.futureId,
                userId: this.userId,							
			}
            var res = await api.AddEnroll(data)
            if(res.resultCode == 1){
                this.EnableShow = this.mask = true
            }

        },
        clickClose(){
            this.EnableShow = this.mask = false
        },
    }
}
</script>
